<template>
  <div class="signup-orders-container">
    <!-- 页面标题 -->

    <!-- 加载状态 -->
    <div v-if="isLoading" class="loading-container">
      <div class="loading-spinner">
        <div class="spinner"></div>
        <p>正在加载报名记录...</p>
      </div>
    </div>

    <!-- 报名记录列表 -->
    <div v-else-if="orderList.length > 0" class="orders-list">
      <div
        v-for="order in orderList"
        :key="order.id"
        class="order-card"
        :class="getOrderStatusClass(order.status)"
      >
        <!-- 订单头部 -->
        <div class="order-header">
          <div class="order-info">
            <h3 class="event-name">{{ order.name }}</h3>
            <div class="order-meta">
              <span class="order-id">订单号: {{ order.id }}</span>
              <span class="create-date">报名时间: {{ formatDate(order.createDate) }}</span>
            </div>
          </div>
          <div class="order-status">
            <span class="status-badge" :class="getStatusBadgeClass(order.status)">
              {{ getStatusText(order.status) }}
            </span>
          </div>
        </div>

        <!-- 订单详情 -->
        <div class="order-details">
          <div class="detail-row">
            <div class="detail-item">
              <svg class="detail-icon" viewBox="0 0 24 24" width="16" height="16">
                <path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M16.2,16.2L11,13V7H12.5V12.2L17,14.9L16.2,16.2Z" />
              </svg>
              <span class="detail-label">比赛时间:</span>
              <span class="detail-value">{{ formatDateTime(order.beginTime) }}</span>
            </div>
            <div class="detail-item">
              <svg class="detail-icon" viewBox="0 0 24 24" width="16" height="16">
                <path fill="currentColor" d="M7,15H9C9,16.08 10.37,17 12,17C13.63,17 15,16.08 15,15C15,13.9 13.96,13.5 11.76,12.97C9.64,12.44 7,11.78 7,9C7,7.21 8.47,5.69 10.5,5.18V3H13.5V5.18C15.53,5.69 17,7.21 17,9H15C15,7.92 13.63,7 12,7C10.37,7 9,7.92 9,9C9,10.1 10.04,10.5 12.24,11.03C14.36,11.56 17,12.22 17,15C17,16.79 15.53,18.31 13.5,18.82V21H10.5V18.82C8.47,18.31 7,16.79 7,15Z" />
              </svg>
              <span class="detail-label">报名费用:</span>
              <span class="detail-value price">¥{{ order.money }}</span>
            </div>
          </div>

          <div class="detail-row">
            <div class="detail-item">
              <svg class="detail-icon" viewBox="0 0 24 24" width="16" height="16">
                <path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M17,13H11V7H12.5V11.5H17V13Z" />
              </svg>
              <span class="detail-label">支付状态:</span>
              <span class="detail-value" :class="getPayStatusClass(order.payStatus)">
                {{ getPayStatusText(order.payStatus) }}
              </span>
            </div>
            <div class="detail-item">
              <svg class="detail-icon" viewBox="0 0 24 24" width="16" height="16">
                <path fill="currentColor" d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z" />
              </svg>
              <span class="detail-label">用户ID:</span>
              <span class="detail-value">{{ order.userId }}</span>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="order-actions">
          <button
            v-if="order.payStatus === 0"
            class="action-btn primary"
            @click="handlePayment(order)"
          >
            立即支付
          </button>
<!--          <button-->
<!--            class="action-btn secondary"-->
<!--            @click="viewOrderDetails(order)"-->
<!--          >-->
<!--            查看详情-->
<!--          </button>-->
          <button
            v-if="order.status === 0"
            class="action-btn danger"
            @click="toCancelOrder(order)"
          >
            {{isCancelLoading ? '取消中...' : '取消报名'}}
          </button>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <div class="empty-icon">
        <svg viewBox="0 0 24 24" width="64" height="64">
          <path fill="currentColor" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z" />
        </svg>
      </div>
      <h3 class="empty-title">暂无报名记录</h3>
      <p class="empty-description">您还没有参与任何赛事报名，快去报名参加吧！</p>
      <button class="empty-action-btn" @click="goToSignUp">
        立即报名
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { cancelOrders, getEventOrders } from '@/api/data.js'
import { $message } from '@/utils/message.js'
import { isCancel } from 'axios'

const router = useRouter()
const isLoading = ref(false)
const isCancelLoading = ref(false)
const orderList = ref([])

// 获取报名记录
const getMyEventOrders = async () => {
  try {
    isLoading.value = true
    const res = await getEventOrders()

    if (res.code === 200) {
      orderList.value = res.data || []
      console.log('报名记录获取成功:', orderList.value)
    } else {
      $message.error(res.msg || '获取报名记录失败')
    }
  } catch (error) {
    console.error('获取报名记录失败:', error)
    $message.error('网络错误，请稍后重试')
  } finally {
    isLoading.value = false
  }
}
const toCancelOrder = async (order) => {
  if (confirm(`确定要取消报名 "${order.name}" 吗？`)) {
    $message.info(`正在取消订单，订单号: ${order.id}`)
    try {
      isCancelLoading.value = true
      const res = await cancelOrders(order.id)

      if (res.code === 200) {
        $message.success('取消成功');
        await getMyEventOrders();
      } else {
        $message.error(res.msg || '取消报名失败')
      }
    } catch (error) {
      console.error('取消报名失败:', error)
    } finally {
      isCancelLoading.value = false
    }
  }
}
// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 格式化日期时间
const formatDateTime = (dateTimeString) => {
  const date = new Date(dateTimeString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取订单状态文本
const getStatusText = (status) => {
  const statusMap = {
    0: '待抽签',
    1: '已中签',
    2: '未中签'
  }
  return statusMap[status] || '未知状态'
}

// 获取支付状态文本
const getPayStatusText = (payStatus) => {
  const payStatusMap = {
    0: '待支付',
    1: '已支付',
    2: '支付失败',
    3: '已退款'
  }
  return payStatusMap[payStatus] || '未知状态'
}

// 获取订单状态样式类
const getOrderStatusClass = (status) => {
  const classMap = {
    0: 'status-pending',
    1: 'status-confirmed',
    2: 'status-completed',
    3: 'status-cancelled'
  }
  return classMap[status] || ''
}

// 获取状态徽章样式类
const getStatusBadgeClass = (status) => {
  const classMap = {
    0: 'badge-pending',
    1: 'badge-confirmed',
    2: 'badge-completed',
    3: 'badge-cancelled'
  }
  return classMap[status] || ''
}

// 获取支付状态样式类
const getPayStatusClass = (payStatus) => {
  const classMap = {
    0: 'pay-pending',
    1: 'pay-success',
    2: 'pay-failed',
    3: 'pay-refunded'
  }
  return classMap[payStatus] || ''
}

// 处理支付
const handlePayment = (order) => {
  $message.info(`正在跳转到支付页面，订单号: ${order.id}`)
  // 这里可以跳转到支付页面
}

// 查看订单详情
const viewOrderDetails = (order) => {
  $message.info(`查看订单详情，订单号: ${order.id}`)
  // 这里可以跳转到订单详情页面
}

// 取消订单
const cancelOrder = (order) => {

}

// 跳转到报名页面
const goToSignUp = () => {
  router.push('/signUp')
}

onMounted(() => {
  getMyEventOrders()
})
</script>

<style scoped lang="scss">
.signup-orders-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  //background: #f8fafc;
  min-height: 100vh;
}

// 页面头部
.page-header {
  margin-bottom: 32px;
  text-align: center;

  .page-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;

    .title-icon {
      color: #6366f1;
    }
  }

  .page-subtitle {
    font-size: 16px;
    color: #64748b;
    margin: 0;
  }
}

// 加载状态
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;

  .loading-spinner {
    text-align: center;

    .spinner {
      width: 40px;
      height: 40px;
      border: 4px solid #e2e8f0;
      border-top: 4px solid #6366f1;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 16px;
    }

    p {
      color: #64748b;
      font-size: 16px;
      margin: 0;
    }
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// 订单列表
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

// 订单卡片
.order-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 2px solid transparent;
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  &.status-pending {
    border-color: #fbbf24;
  }

  &.status-confirmed {
    border-color: #10b981;
  }

  &.status-completed {
    border-color: #6366f1;
  }

  &.status-cancelled {
    border-color: #ef4444;
  }
}

// 订单头部
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;

  .order-info {
    flex: 1;

    .event-name {
      font-size: 20px;
      font-weight: 600;
      color: #1e293b;
      margin: 0 0 8px 0;
    }

    .order-meta {
      display: flex;
      flex-direction: column;
      gap: 4px;

      span {
        font-size: 14px;
        color: #64748b;
      }
    }
  }

  .order-status {
    .status-badge {
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;

      &.badge-pending {
        background: #fef3c7;
        color: #d97706;
      }

      &.badge-confirmed {
        background: #d1fae5;
        color: #059669;
      }

      &.badge-completed {
        background: #ddd6fe;
        color: #7c3aed;
      }

      &.badge-cancelled {
        background: #fee2e2;
        color: #dc2626;
      }
    }
  }
}

// 订单详情
.order-details {
  margin-bottom: 24px;

  .detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .detail-item {
    display: flex;
    align-items: center;
    gap: 8px;

    .detail-icon {
      color: #6366f1;
      flex-shrink: 0;
    }

    .detail-label {
      font-size: 14px;
      color: #64748b;
      font-weight: 500;
    }

    .detail-value {
      font-size: 14px;
      color: #1e293b;
      font-weight: 600;

      &.price {
        color: #dc2626;
        font-size: 16px;
      }

      &.pay-pending {
        color: #d97706;
      }

      &.pay-success {
        color: #059669;
      }

      &.pay-failed {
        color: #dc2626;
      }

      &.pay-refunded {
        color: #6b7280;
      }
    }
  }
}

// 操作按钮
.order-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;

  .action-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;

    &.primary {
      background: #6366f1;
      color: white;

      &:hover {
        background: #5b21b6;
      }
    }

    &.secondary {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;

      &:hover {
        background: #e2e8f0;
      }
    }

    &.danger {
      background: #fee2e2;
      color: #dc2626;
      border: 1px solid #fecaca;

      &:hover {
        background: #fecaca;
      }
    }
  }
}

// 空状态
.empty-state {
  text-align: center;
  padding: 80px 20px;

  .empty-icon {
    margin-bottom: 24px;

    svg {
      color: #cbd5e1;
    }
  }

  .empty-title {
    font-size: 24px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 12px 0;
  }

  .empty-description {
    font-size: 16px;
    color: #64748b;
    margin: 0 0 32px 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .empty-action-btn {
    background: #6366f1;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;

    &:hover {
      background: #5b21b6;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .signup-orders-container {
    padding: 16px;
  }

  .order-card {
    padding: 16px;
  }

  .order-header {
    flex-direction: column;
    gap: 12px;

    .order-status {
      align-self: flex-start;
    }
  }

  .detail-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .order-actions {
    flex-direction: column;

    .action-btn {
      width: 100%;
      justify-content: center;
    }
  }
}
</style>
